<script setup>
import { reactive, computed } from 'vue';
import { useIuserInfoStore } from '@T2/store/users.ts';
import dayjs from 'dayjs';

const iuserInfoStore = useIuserInfoStore();
const { info } = iuserInfoStore;

const props = defineProps({
  lists: {
    type: Array,
    required: true,
  }
});

/* 数量统计 */
const sysNums = computed(() => {
  let alarm = 0, offline = 0, cares = 0;
  props.lists.forEach(item => {
    item.warn_number && alarm++;
    !item.online && offline++;
    item.users.includes(info.id) && cares++;
  });
  return {alarm, offline, cares};
});


/* tab切换 */
const tabResd = reactive({
  curDex: 1,
});
const tabsClick = (node) => {
  tabResd.curDex = node;
  if (node === 1) {
    props.lists.forEach(item => {
      item.hide = false;
    });
  } else if (node === 2) {
    props.lists.forEach(item => {
      item.hide = true;
      if (!item.online || item.warn_number) {
        item.hide = false;
      }
    });
  } else if (node === 3) {
    props.lists.forEach(item => {
      item.hide = false;
      if (item.online) {
        item.hide = true;
      }
    });
  } else if (node === 4) {
    props.lists.forEach(item => {
      item.hide = true;
      if (item.users.includes(info.id)) {
        item.hide = false;
      }
    });
  }
}

const Resd = reactive({
  opened: true,
});
</script>

<template>
  <div class="asideBox vw-ignore" :class="{'open-data': Resd.opened}">
    
    <div class="line-box flex-end pointer">
      <div class="line flex-center-center" @click="Resd.opened = !Resd.opened">
        <el-icon color="#fff"><ArrowLeft /></el-icon>
      </div>
    </div>
    
    <div class="content-box">
      <label>实时数据</label>
      <img :src="require('@T2/assets/hr/line1.png')" />
      <div class="flex-center">
        <div class="card flex-sb-center">
          <div class="data flex-sb-center flex-column" @click="tabsClick(1)">
            <div class="nums" style="color: #4D92F5">{{ props.lists.length }}</div>
            <div class="name" :class="{'isActive': tabResd.curDex === 1}">全部</div>
          </div>
          <div class="data flex-sb-center flex-column" @click="tabsClick(2)">
            <div class="nums" style="color: #F54D4D">{{ sysNums.alarm }}</div>
            <div class="name" :class="{'isActive': tabResd.curDex === 2}">异常</div>
          </div>
          <div class="data flex-sb-center flex-column" @click="tabsClick(3)">
            <div class="nums" style="color: #505050">{{ sysNums.offline }}</div>
            <div class="name" :class="{'isActive': tabResd.curDex === 3}">离线</div>
          </div>
          <div class="data flex-sb-center flex-column" @click="tabsClick(4)">
            <div class="nums" style="color: #FFCE00">{{ sysNums.cares }}</div>
            <div class="name" :class="{'isActive': tabResd.curDex === 4}">关注</div>
          </div>
        </div>
      </div>
      
      <div class="data-box flex-column">
        <div class="data-line flex">
          <div class="unit-name flex-end-center">检测点名称</div>
          <div class="data-value flex-sb-center">
            <span>液位</span><span>出水压力</span><span>余氯</span><span>浊度</span>
          </div>
          <div class="time flex-center-center">上传时间</div>
        </div>
        
        <div class="data-line flex" v-for="item in props.lists" v-show="!item.hide">
          <div class="unit-name flex-end-center">
            <img class="pointer" :src="item.users.includes(info.id) ? require('@T2/assets/common/cares-yes.png') : require('@T2/assets/common/cares-no.png')" />
            <div class="name ellipsis">{{ item.name }}</div>
          </div>
          <template v-if="item._sensors?.length > 1 && item._sensors[1].c?.length > 3">
            <div class="data-value flex-sb-center">
              <span v-for="sensor in item._sensors[1].c">{{ sensor.value !== '掉线' ? sensor.value : '--'}}</span>
            </div>
            <div class="time flex-center-center">{{ dayjs(item._sensors[1].c[0].timestamp).format('MM-DD HH:mm') }}</div>
          </template>
          
          <template v-else>
            <div class="data-value flex-sb-center">
              <span>--</span><span>--</span><span>--</span><span>--</span>
            </div>
            <div class="time flex-center-center">--</div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.asideBox {
  position: absolute;
  right: -477px;/* px-to-viewport-ignore */
  top: 50%;
  transform: translateY(-50%);
  width: 477px;/* px-to-viewport-ignore */
  height: 95%;
  background: #FFFFFF;
  border-radius: 6px 0px 0px 3px;/* px-to-viewport-ignore */
  transition: right 0.5s;
  z-index: 100;
}
.open-data {
  right: 0;
}
.line-box {
  position: absolute;
  left: -30px;/* px-to-viewport-ignore */
  top: 50%;
  transform: translateY(-50%);
  height: 90px;/* px-to-viewport-ignore */
  width: 30px;/* px-to-viewport-ignore */
  .line {
    height: 100%;
    width: 18px;/* px-to-viewport-ignore */
    background-color: #4D92F5;
    border-radius: 2px 0px 0px 2px;/* px-to-viewport-ignore */
  }
}
.content-box {
  padding: 18px 12px;/* px-to-viewport-ignore */
  label {
    padding-left: 8px;/* px-to-viewport-ignore */
    font-weight: 500;
    font-size: 20px;/* px-to-viewport-ignore */
    color: #000000;
    line-height: 23px;/* px-to-viewport-ignore */
  }
  >img {
    width: 100%;
    height: 7px;/* px-to-viewport-ignore */
  }
}
.card {
  margin-top: 18px;/* px-to-viewport-ignore */
  width: calc(100% - 36px);/* px-to-viewport-ignore */
  height: 66px;/* px-to-viewport-ignore */
  background: #FFFFFF;
  box-shadow: 0px 4px 4px 4px rgba(0,0,0,0.05);/* px-to-viewport-ignore */
  border-radius: 3px 3px 3px 3px;/* px-to-viewport-ignore */
  .data {
    width: 25%;
    height: 100%;
    padding-top: 5px;/* px-to-viewport-ignore */
    cursor: pointer;
    .nums {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 24px;/* px-to-viewport-ignore */
      line-height: 28px;/* px-to-viewport-ignore */
    }
    .name {
      height: 25px;/* px-to-viewport-ignore */
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 12px;/* px-to-viewport-ignore */
      color: #ABABAB;
      line-height: 14px;/* px-to-viewport-ignore */
      position: relative;
    }
    .isActive {
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 45px;/* px-to-viewport-ignore */
        height: 4px;/* px-to-viewport-ignore */
        left: 50%;
        transform: translateX(-50%);
        background-color: #4D92F5;
      }
    }
  }
}
.data-box {
  width: 100%;
  padding: 0 8px;
  margin-top: 15px;/* px-to-viewport-ignore */
  position: relative;
  .data-line {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 13px;/* px-to-viewport-ignore */
    color: #505050;
    line-height: 15px;/* px-to-viewport-ignore */
    margin-bottom: 20px;/* px-to-viewport-ignore */
    .unit-name {
      width: 85px;/* px-to-viewport-ignore */
      img {
        width: 15px;/* px-to-viewport-ignore */
        height: 15px;/* px-to-viewport-ignore */
      }
      .name {
        margin-left: auto;
        width: 65px;/* px-to-viewport-ignore */
      }
    }
    .time {
      width: 70px;/* px-to-viewport-ignore */
      font-size: 12px;/* px-to-viewport-ignore */
    }
    .data-value {
      flex: 1;
      font-size: 13px;/* px-to-viewport-ignore */
      color: #4D92F5;
      span {
        display: inline-block;
        width: 25%;
        text-align: center;
      }
    }
  }
  .data-line:nth-child(1)  {
    .data-value {
      color: #505050;
    }
    .time {
      font-size: 13px;/* px-to-viewport-ignore */
    }
  }
  
}
</style>

